<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="com.google.appengine.api.users.User" %>
<%@ page import="com.google.appengine.api.users.UserService" %>
<%@ page import="com.google.appengine.api.users.UserServiceFactory" %>


<html dir="ltr">
	<head>
		<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css"/>
        <style type="text/css">
            body, html { font-family:helvetica,arial,sans-serif; font-size:100%; margin-bottom: 5%;}
        </style>
                <style type="text/css">
            html, body { width: 90%; height: 100%; margin: 0; }
        </style>
        
        <script type="text/javascript">

		</script>
	</head>
	
<body class=" claro ">
<h1>Model Editor</h1>
<%
    UserService userService = UserServiceFactory.getUserService();
    User user = userService.getCurrentUser();

    if (user != null) {
    	
%>

        <script type="text/javascript">
	        var nickname = "<%=user.getNickname() %>";
		</script>
<p>Hello, <%= user.getNickname() %>! (You can
<a href="<%= userService.createLogoutURL(request.getRequestURI()) %>">sign out</a>.)</p>
        <div dojoType="dijit.MenuBar" id="navMenu">
            <div dojoType="dijit.PopupMenuBarItem">
                <span>
                    File
                </span>
                <div dojoType="dijit.Menu" id="fileMenu"> 
                    <div dojoType="dijit.MenuItem" onclick="addNewTab()">
                    	New #1 
                    </div>
                    <div dojoType="dijit.MenuItem" onclick="fileOpen()">
                        Open #2
                    </div>
                    <div dojoType="dijit.MenuItem" onClick="fileSave()">
                        Save #3
                    </div>
                </div>
            </div>
            <div dojoType="dijit.PopupMenuBarItem">
                <span>
                    Edit
                </span>
                <div dojoType="dijit.Menu" id="editMenu">
                    <div dojoType="dijit.MenuItem" onClick="alert('edit 1')">
                        Edit #1
                    </div>
                    <div dojoType="dijit.MenuItem" onClick="alert('edit 2')">
                        Edit #2
                    </div>
                </div>
            </div>
            <div dojoType="dijit.PopupMenuBarItem">
                <span>
                    Help
                </span>
                <div dojoType="dijit.Menu" id="helpMenu">
                    <div dojoType="dijit.MenuItem" onClick="alert('edit 1')">
                        About you #1
                    </div>
                    <div dojoType="dijit.MenuItem" onClick="alert('edit 2')">
                        Version #2
                    </div>
                </div>
            </div>
        </div>
        <!-- �������烌�C�A�E�g-->
        <div dojoType="dijit.layout.BorderContainer" style="width: 100%; height: 90%;">
            <div dojoType="dijit.layout.ContentPane" region="top">
                Top pane
                <div id="OpenFiledialog" dojoType="dijit.Dialog" title="OpenFileDialog">
			    	<div dojoType="dijit.layout.TabContainer" style="width: 200px; height: 300px;">
    		    		<div dojoType="dijit.layout.ContentPane" title="projects">
        		    		Projects
        		    		<select id="filelist" size="5" >
        		    		</select>
        		    		<p>
        		    		<button id="OpenFileOK" type="button">
							</button>
        		    		<button id="OpenFileCancel" type="button">
							</button>
							</p>
        				</div>
        				<div dojoType="dijit.layout.ContentPane" title="models">
        			    	Models
        				</div>
    				</div>
				</div>
                <div id="SaveFiledialog" dojoType="dijit.Dialog" title="SaveFileDialog">
			    	<div dojoType="dijit.layout.TabContainer" style="width: 200px; height: 300px;">
    		    		<div dojoType="dijit.layout.ContentPane" title="projects">
        		    		Projects
        		    		<input type="text" name="firstname" value="filename" dojoType="dijit.form.TextBox"
								trim="true" id="firstname" propercase="true">
							<label for="firstname">
								
							</label>
        		    		<button id="SaveFileOK" type="button">
							</button>
        		    		<button id="SaveFileCancel" type="button">
							</button>
        				</div>
        				<div dojoType="dijit.layout.ContentPane" title="models">
        			    	Models
        				</div>
    				</div>
				</div>
            </div>
            <div dojoType="dijit.layout.AccordionContainer" region="leading" >
                <div dojoType="dijit.layout.AccordionPane" title="pane #1">
                    accordion pane #1
                </div>
                <div dojoType="dijit.layout.AccordionPane" title="pane #2">
                    accordion pane #2
                </div>
                <div dojoType="dijit.layout.AccordionPane" title="pane #3">
                    accordion pane #3
                </div>
            </div>
            <div dojoType="dijit.layout.TabContainer" region="center" id="tabs">
                
                <div dojoType="dijit.layout.ContentPane" title="tab #1">
                    tab pane #1
                </div>
            </div>
            <div dojoType="dijit.layout.ContentPane" region="trailing">
                Trailing pane
            </div>
            <div dojoType="dijit.layout.ContentPane" region="bottom">
                Bottom pane
            </div>
        </div>


<%
    } else {
%>
<p>Hello!
<a href="<%= userService.createLoginURL(request.getRequestURI()) %>">Sign in</a>
to include your name with greetings you post.</p>
<%
    }
%>

  </body>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"
    djConfig="parseOnLoad: true">
    </script>
    <script type="text/javascript">
        dojo.require("dijit.MenuBar");
        dojo.require("dijit.MenuBarItem");
        dojo.require("dijit.PopupMenuBarItem");
        dojo.require("dijit.Menu");
        dojo.require("dijit.MenuItem");
        dojo.require("dijit.PopupMenuItem");
        dojo.require("dijit.layout.BorderContainer");
        dojo.require("dijit.layout.TabContainer");
        dojo.require("dijit.layout.AccordionContainer");
        dojo.require("dijit.layout.ContentPane");
        dojo.require("dijit.form.Button");
        dojo.require("dijit.form.TextBox");
        dojo.require("dijit.Dialog");
        dojo.require("dijit.form.MultiSelect");
        
        dojo.addOnLoad(function() {

            var ofo_btn = new dijit.form.Button({
                label: "OK",
                onClick: function() {
                    // Do something:
				 	dijit.byId("OpenFiledialog").hide();
                }
            },
            "OpenFileOK");

            var sfo_btn = new dijit.form.Button({
                label: "OK",
                onClick: function() {
                    // Do something:
				 	dijit.byId("OpenFiledialog").hide();
                }
            },
            "SaveFileOK");
            
            var ofc_btn = new dijit.form.Button({
                label: "Cancel",
                onClick: function() {
                    // Do something:
    			 	dijit.byId("OpenFiledialog").hide();
                }
            },
            "OpenFileCancel");

            var sfo_btn = new dijit.form.Button({
                label: "Cancel",
                onClick: function() {
                    // Do something:
    			 	dijit.byId("SaveFiledialog").hide();
                }
            },
            "SaveFileCancel");
            
		 	var sel = dojo.byId('filelist');
            var op = dojo.doc.createElement("option");
            op.innerHTML = "text";
            op.value = "a";
            sel.appendChild(op);
            new dijit.form.MultiSelect({
                name: 'filelist'
            },
            sel);
        });

        /*
        	ファイルリストを取得する
        */
        function getfilelist(){
            var recv_filename = new Array();
            
            //recv処理
            
		 	var sel = dojo.byId('filelist');
		 	var i;
		 	for(i=0;i < recv_filename.length;i++){
            	var op = dojo.doc.createElement("option");
            	op.innerHTML = recv_filename[i];
            	op.value = "a";
            	sel.appendChild(op);
		 	}
        }
        
		function fileOpen()
		{
			 	dijit.byId("OpenFiledialog").show();
		}
		function fileSave()
		{
			 	dijit.byId("SaveFiledialog").show();
		}
        function addNewTab()
        {
    		var tc = dijit.byId("tabs");
        	var cp = new dijit.layout.ContentPane({
	            title: "tab",
	            content: nickname+"content",
	            closable: true
	        });
        	//var textarea = new dijit.form.Textarea();
        	//cp.addchild(textarea);
	        tc.addChild(cp);
	        tc.startup();
        }
                
    </script>
    <script type="text/javascript">
        dojo.addOnLoad(function() {
            if (document.pub) {
                document.pub();
            }
        });
    </script>
    <!-- 
    <script type="text/javascript">
        function fileOpen()
        {
            var input = document.createElement("input");
            input.type = "file";
            document.body.appendChild(input);
        }
    </script>
     -->
    
    
</html>